<template>
    <div class="">
        <Breadcrumb :route="routes" />
        <div class="wb-container">
            <div class="mian-content">
                <el-table v-loading="loading" element-loading-text="加载数据..." :data="BusinessListings"
                    style="width: 100%;height: 100%;"
                    :header-cell-style="{ background: '#44abf7', color: '#fff', fontSize: '14px', height: '40px', letterSpacing: '2px' }"
                    size="small" border>
                    <template #empty>
                        <el-empty description="暂无数据！" />
                    </template>
                    <el-table-column prop="account" label="用户名" align="center" />
                    <el-table-column label="角色名称" align="center">
                        <template #default="{ row }">
                            <div v-for="item in row.admin_user_role">
                                {{ item.role.name }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="last_login_time_at" label="最后登录的时间" align="center" />
                    <el-table-column prop="created_at" label="开始时间" align="center" />
                    <el-table-column prop="withdrawal_rate" label="提现费率" align="center">
                        <template #default="{ row }">
                            <div class="withdrawal">{{ row.withdrawal_rate }} %</div>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="demo-pagination-block">
                    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                        :page-sizes="[15, 20, 25, 30]" :small="small" :disabled="disabled" :background="background"
                        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import { useRoute } from "vue-router";
import Breadcrumb from '@/components/nav-header'
import { businessList } from '@/api/business'

const route = useRoute()
const routes = ref()
const BusinessListings = ref([])
const loading = ref(true)
const currentPage = ref(1)
const pageSize = ref(15)
const small = ref(true)
const background = ref(true)
const disabled = ref(false)
const total = ref(0)
const list = reactive({
    limit: 15,
    page: 1
})

onMounted(() => {
    routes.value = route.matched
    getBusinessList()

})
const getBusinessList = async () => {
    await businessList(list).then(res => {
        const { code, data } = res
        loading.value = false
        if (code == 200) {
            if (Object.keys(data).length == 0) {
                BusinessListings.value = []
                total.value = data.total
            } else {
                BusinessListings.value = data.data
                total.value = data.total
            }
        }
    }).catch((err) => {
        loading.value = false
    })
}
const handleSizeChange = (val) => {
    list.limit = val
    getBusinessList()
}
const handleCurrentChange = (value) => {
    list.page = value
    getBusinessList()
}
</script>

<style lang="less" scoped>
.table {
    padding: 20px;
}

.withdrawal {
    margin: 10px;
}
</style>